<template>
  <div class="wrapper">
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/consultantManage' }"
          >顾问管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: '/consultantManage/consultantPersonManage' }"
          >顾问人员管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>所有顾问预约排班表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="name-box">
      所有顾问预约排班表
    </div>
    <div
      :class="['date-bar card flex-center', { fixed: isScrollDown }]"
      ref="dateBar"
    >
      <elan-svg icon="arrow-left" @click="handleData(true)"></elan-svg>
      <p class="date title">
        <span>{{ month }}</span>
      </p>
      <elan-svg icon="arrow-right" @click="handleData(false)"></elan-svg>
    </div>
    <div class="calendar">
      <el-calendar v-model="currentDate">
        <div slot="dateCell" slot-scope="{ date, data }">
          <div class="date-cell" @click="handleCellClick(data, date)">
            <div class="calendar-day">
              {{ getData(data) }}
            </div>
            <el-scrollbar class="scrollbar">
              <div
                v-for="(item, index) in formatSchedule(data)"
                :key="index"
                class="subject_info"
              >
                <div
                  class="personName"
                  v-for="(_item, _index) in item.children"
                  :key="_index"
                >
                  <div class="time">
                    {{ _item.startTime.substring(10, 16) }} -{{
                      _item.endTime.substring(10, 16)
                    }}
                  </div>
                  <div>
                    <span
                      class="name"
                      v-for="(info, i) in _item.personInfoList"
                      :key="i"
                      >{{ info.consultantName }}
                      <i v-if="i < _item.personInfoList.length - 1">，</i>
                    </span>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-calendar>
    </div>
    <el-dialog
      :title="`${dialogDate} 预约排班表`"
      :visible.sync="visible"
      width="500px"
      :before-close="handleClose"
    >
      <el-scrollbar class="scrollbar-dialog">
        <div
          class="box"
          v-for="(_item, _index) in currentSchedule.children"
          :key="_index"
        >
          <div class="time">
            {{ _item.startTime.substring(10, 16) }} -{{
              _item.endTime.substring(10, 16)
            }}
          </div>
          <div>
            <span
              class="name"
              v-for="(info, i) in _item.personInfoList"
              :key="i"
              >{{ info.consultantName }}
              <i v-if="i < _item.personInfoList.length - 1">，</i>
            </span>
          </div>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import { formateStandardTime, getLastDay } from "@/utils/formate";
import { appointmentList } from "@/api";
export default {
  data() {
    return {
      isScrollDown: false,
      month: "",
      dialogDate: "",
      currentDate: new Date(),
      dateBarOffsetTop: 0,
      schedule: [],
      visible: false,
      currentSchedule: { children: [] },
    };
  },
  computed: {
    userId() {
      return this.$store.getters.GET_USER_ID;
    },
    formatSchedule() {
      return (data) => {
        return this.schedule.filter((ele) => {
          let time = ele.currentTime.slice(0, 10); // 将时间戳转格式
          return this.$moment(time).isSame(data.day); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
        });
      };
    },
  },
  watch: {
    currentDate: {
      handler() {
        this.appointmentListFn();
      },
      deep: true,
    },
  },
  created() {
    document.addEventListener("scroll", this.handleScroll);
    this.appointmentListFn();
  },
  mounted() {
    this.$nextTick(() => {
      this.handleMonth();
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:first-child"
      );
      prevBtn.addEventListener("click", () => {
        this.appointmentListFn();
      });

      // 点击后一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:last-child"
      );
      nextBtn.addEventListener("click", () => {
        this.appointmentListFn();
      });
    });
    this.dateBarOffsetTop = this.$refs.dateBar.offsetTop;
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getData(data) {
      let month = this.currentDate.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      const currentMonth = data.day.substring(5, 7);
      if (month == currentMonth) {
        return data.day
          .split("-")
          .slice(2)
          .join("-");
      }
    },
    handleClose() {
      this.visible = false;
    },
    handleCellClick(data, date) {
      this.month = formateStandardTime(date, "m", "Chinese");
      this.dialogDate = formateStandardTime(date, "y", "Chinese");
      const currentSchedule = this.schedule.find((item) => {
        return this.$moment(data.day).isSame(item.currentTime, "day");
      });
      if (currentSchedule) {
        this.currentSchedule = currentSchedule;
        this.visible = true;
        return;
      }
    },
    appointmentListFn() {
      const tempTime = formateStandardTime(this.currentDate, "m");
      const lastDay = getLastDay(tempTime.slice(0, 4), tempTime.slice(5));
      const params = {
        appointmentStatus: 20,
        matchStartTime: `${tempTime}-01 00:00:00`,
        matchEndTime: `${tempTime}-${lastDay} 23:59:59`,
        orderByColumn: "startTime",
        orderBy: "10",
      };
      appointmentList(params).then((res) => {
        if (res.code == 200) {
          this.schedule =
            Array.isArray(res.data) && res.data.length ? res.data : [];
        }
      });
    },
    handleMonth() {
      let month = document.querySelector(
        ".el-calendar__header .el-calendar__title"
      );
      this.month = month.innerText;
    },
    handleData(isPrev) {
      if (isPrev) {
        let prevBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:first-child"
        );
        prevBtn.click();
        this.$nextTick(() => {
          this.handleMonth();
        });
      } else {
        let nextBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:last-child"
        );
        nextBtn.click();
        this.$nextTick(() => {
          this.handleMonth();
        });
      }
    },
    handleScroll() {
      this.isScrollDown =
        (document.documentElement.scrollTop || document.body.scrollTop) >=
        this.dateBarOffsetTop;
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  padding: 24px 0;
}
.wrapper {
  padding: 24px;
  background: url(/assets/img/bigBg.8bd3c711.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .bread {
    margin-bottom: 18px;
    ::v-deep .content-wrapper .content .el-breadcrumb {
      padding: 0;
      background-color: transparent;
    }
    ::v-deep .el-breadcrumb__separator {
      color: #000;
    }
    ::v-deep .el-breadcrumb__inner {
      color: #8892a6;
    }
    ::v-deep .el-breadcrumb__item:last-of-type .el-breadcrumb__inner {
      color: #222;
    }
  }
  .name-box {
    font-size: 20px;
    padding: 0 0 24px 0;
    color: #000;
  }
  .date-bar {
    justify-content: center;
    background-color: #fff;
    user-select: none;
    border-radius: 8px 8px 0 0;
    &.fixed {
      position: fixed;
      left: 224px;
      top: 0;
      width: calc(100% - 248px);
      z-index: 2000;
    }
    .svg-icon {
      cursor: pointer;
      font-size: 22px;
      color: $grey-7;
    }
    .date {
      font-size: 20px;
      font-weight: 700;
      padding: 0 28px;
      .mr-12 {
        margin-right: 12px;
      }
    }
  }
  .calendar {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    ::v-deep .el-calendar {
      .el-calendar__body {
        padding: 0;
        margin-top: -53px;
      }
      .el-calendar__header {
        opacity: 0;
      }
      .el-calendar-table thead {
        th {
          height: 64px;
          line-height: 64px;
          background: #edf4fd;
          border: 1px solid #eaedf7;
          text-align: center;
          &:first-child {
            border-left-color: #f2f8ff;
          }
          &:last-child {
            border-right-color: #f2f8ff;
          }
        }
      }
      .el-calendar-table {
        td {
          border-color: #eaedf7;
          // pointer-events: none;
          font-size: 18px;
          color: $grey-9;
          &:first-child {
            border-left-color: #f4faff;
          }
          &:last-child {
            border-right-color: #f4faff;
          }
          &.prev,
          &.next {
            color: $grey-7;
            background-color: rgba(244, 247, 249, 0.69);
            .svg-icon {
              opacity: 0.5;
            }
          }
          &.current {
            background-color: transparent;
          }
          &.is-today {
            color: $primary-color;
            font-weight: 700;
            background: rgba(58, 152, 247, 0.18);
          }
        }

        .el-calendar-day {
          padding: 16px 0 0 14px;
          min-height: 60px;
          height: auto;
          font-weight: 600;
        }
        .calendar-day {
          padding: 6px 0;
        }
        .scrollbar {
          height: 160px;
        }
        .subject_info {
          margin-top: 6px;
          .personName {
            padding: 4px 0;
            font-size: 12px;
            font-weight: 400;
            cursor: pointer;
            .time {
              color: #97a0c3;
              padding-bottom: 4px;
            }
            .name {
              color: $grey-7;
              line-height: 16px;
            }
          }
        }
      }
    }
  }
  .scrollbar-dialog {
    height: 400px;
    .box {
      margin-top: 8px;
      font-size: 14px;
      .name {
        line-height: 18px;
        color: #8c8c8c;
      }
      .time {
        padding: 8px 0;
        font-size: 16px;
        color: #97a0c3;
      }
    }
  }
  ::v-deep .el-dialog__body {
    padding: 0 0 0 24px;
  }
}
</style>
